import React, { Component } from 'react'

// 条件渲染

export default class App extends Component {

    state = {
        flag: true
    }

    render() {

        let str = ''
        if (this.state.flag) {
            str = <h1>你好世界</h1>
        } else {
            str = <h1>你好中国</h1>
        }


        return (
            <div>
                {/* <h1 v-if='this.state.flag'>你好世界</h1>
                <h1 v-else>你好中国</h1> */}

                {str}

                <hr />

                {/* 通过三目运算实现显示隐藏 */}
                {this.state.flag ? (<h1>你好世界</h1>) : (<h1>你好中国</h1>)}

                <hr />

                {/* 当前面条件为真的时候，显示后面的内容 */}
                {this.state.flag && (<h1>你好世界</h1>)}

                <hr />

                {/* 当前面条件为假的时候，显示后面内容 */}
                {this.state.flag || (<h1>你好中国</h1>)}


                <hr />

                <button onClick={() => {
                    this.setState({
                        flag: !this.state.flag
                    })
                }}>切换显示</button>
            </div>
        )
    }
}
